<template>
	<div class="install">
		<el-card class="columnnav">
			<template #header>
				<div class="button-container">
					<h4>自助建站系统安装</h4>
				</div>
			</template>
			<el-form :model="form" ref="form" label-width="120px" :rules="rules">
				<el-form-item label="网站域名:">
					<el-input v-model="form.domain" disabled />
				</el-form-item>
				<el-form-item label="激活码:" aria-placeholder="请输入激活码" prop="code">
					<el-input v-model="form.code" />
				</el-form-item>
				<el-form-item label="管理员账号:" aria-placeholder="请设置管理员账号" prop="username">
					<el-input v-model="form.username" />
				</el-form-item>

				<el-form-item label="管理员密码:" prop="password">
					<el-input v-model="form.password" aria-placeholder="请设置管理员密码" show-password />
				</el-form-item>
				<el-form-item label="再次输入密码:" aria-placeholder="请再次输入密码" prop="confirmPassword">
					<el-input v-model="form.confirmPassword" show-password />
				</el-form-item>
				<el-form-item label="管理员邮箱:" aria-placeholder="请输入管理员邮箱" prop="email">
					<el-input v-model="form.email" />
				</el-form-item>
				<el-form-item prop="agreement">
					<el-checkbox v-model="form.agreement" label size="large" />
					<span>阅读并接受</span>
					<el-button link type="primary">DEXC自助建站协议</el-button>
					<span>和</span>
					<el-button link type="primary">隐私协议</el-button>
				</el-form-item>
			</el-form>
			<div class="button-container">
				<el-button type="primary" @click="register" :loading="loading">下一步</el-button>
			</div>
		</el-card>
	</div>
</template>
<script>
	import { dataRequest as api } from '@/api/api'
	import sha256 from 'crypto-js/sha256'
	export default {
		data() {
			return {
				loading: false,
				form: {
					domain: window.location.hostname.toLowerCase().replace(/^www\./, ''),
					code: '',
					username: '',
					password: '',
					confirmPassword: '', //再次输入密码
					email: '',
					agreement: false,
				},
				rules: {
					domain: [
						{ required: true, message: '请输入域名', trigger: 'blur' },
						{ pattern: /^[a-zA-Z][a-zA-Z0-9]{4,15}$/, message: '账号长度在5-16字节,字母开头 只允许字母数字', trigger: 'blur' },
					],
					code: [
						{ required: true, message: '请输入激活码', trigger: 'blur' },
						{ pattern: /^[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i, message: '激活码格式错误', trigger: 'blur' },
					],
					username: [
						{ required: true, message: '请输入账号', trigger: 'blur' },
						{ pattern: /^[a-zA-Z][a-zA-Z0-9]{4,15}$/, message: '账号长度在5-16字节,字母开头 只允许字母数字', trigger: 'blur' },
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,18}$/, message: '密码必须包含大小写字母和数字 长度在8-18位之间', trigger: 'blur' },
					],
					confirmPassword: [
						{ required: true, message: '请再次输入密码', trigger: 'blur' },
						{
							validator: (rule, value, callback) => {
								if (value === this.form.password) {
									callback() // 与密码相同，验证通过
								} else {
									callback(new Error('两次输入的密码不一致'))
								}
							},
							trigger: 'blur',
						},
					],
					email: [
						{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
						{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
					],
					agreement: [
						{
							validator: (rule, value, callback) => {
								if (value) {
									callback() // 用户已同意协议，验证通过
								} else {
									callback(new Error('请同意协议')) // 用户未同意协议，验证失败
								}
							},
							trigger: 'change', // 验证触发方式
						},
					],
				},
			}
		},
		methods: {
			async register() {
				this.loading = true
				this.$refs['form'].validate(async (valid) => {
					if (valid) {
						let data = { ...this.form }
						delete data.agreement
						delete data.confirmPassword

						data.password = sha256(sha256(data.password)).toString()
						// 注册的代码
						let arr = await api('Create', 'install', data)
						if (arr.code == 200) {
							this.$message.success('安装成功')
							// 跳转到登录页
							this.$router.push('/login')
						} else {
							this.$message.error(`安装失败:${arr.data}`)
						}
					} else {
						this.loading = false
						return false
					}
					this.loading = false
				})
			},
		},
	}
</script>
<style scoped>
	.columnnav {
		margin: auto;

		width: 500px !important;
	}
	.install {
		padding-top: 100px;
	}
	.button-container {
		display: flex;
		justify-content: center; /* 水平居中 */
	}
</style>
<!-- 增加经销商数据表   经销商ID 收款地址   -->
<!-- 用户端  经销商ID  -->

<!-- 经销商通过后端生成ID -->

<!-- 后端生成激活码 -->
